<template>
  <div class="content">
    <nav-bar class="nav-bar">
      <div slot="left">
        <img src="../../assets/img/common/back.svg" alt=""
          @click="back">
      </div>
      <div slot="center">
        <p>电台</p>
      </div>
    </nav-bar>
<!--    <radio-nav-bar class="nav-bar"></radio-nav-bar>-->
    <radio-swiper class="banner" v-bind:banners="banners"></radio-swiper>
    <radio-recommand class="radio-recommand"></radio-recommand>
    <radio-recommand-list class="radio-recommand-list"></radio-recommand-list>
  </div>
</template>

<script>
  import NavBar from "../../components/common/navbar/NavBar";
  import RadioNavBar from "./ChildRadio/RadioNavBar";
  import RadioSwiper from "./ChildRadio/RadioSwiper";
  import RadioRecommand from "./ChildRadio/RadioRecommand";
  import RadioRecommandList from "./ChildRadio/RadioRecommandList";
  import {radioBanner} from "../../network/radio";
  export default {
        name: "Radio",
        components:{
            RadioNavBar,
            RadioSwiper,
            RadioRecommand,
            RadioRecommandList,
            NavBar
        },
      data(){
        return{
            banners:[],
        }
      },
      created() {
        radioBanner().then(res=>{
            this.banners = res.data.data
        })
      },
      methods:{
          back(){
              this.$router.back();
          }
      }
  }
</script>

<style scoped>
  .content{
    position: relative;
  }

  .nav-bar{
    position: fixed;
    z-index: 2;
    background-color: white;
  }

  .banner{
    position: relative;
    top: 44px;
  }

  .radio-recommand{
    position: relative;
    top: 44px;
  }

  .radio-recommand-list{
    position: relative;
    top: 44px;
  }


</style>